<template>
  <div style="position: absolute; left: 0; right: 0;">
    <div class="head" style="width: 100%">
      <div style="position: absolute; width: 300px; left: 20px; top: 1%; height: 5%">
        <img src="../resources/logo.jpg" height="62px" style="float: left;">
        <span style="float: left; margin-left: 20px;">
            科大国创项目管理系统
          </span>
      </div>
      <el-menu mode="horizontal" style="position: absolute; left: 40%; width: 430px;">
        <el-menu-item index="1" style="color: black;">工作台</el-menu-item>
        <el-menu-item index="2" style="color: black;">合同</el-menu-item>
        <el-menu-item index="3" style="color: black;">项目</el-menu-item>
        <el-menu-item index="4" style="color: black;">需求</el-menu-item>
        <el-menu-item index="5" style="color: black;">缺陷</el-menu-item>
        <el-menu-item index="6" style="color: black;">PMO</el-menu-item>
      </el-menu>
      <div style="position: absolute; right: 30px; width: 5%">
        <el-dropdown @command="userAct">
          <span>
            <i class="el-icon-user" style="font-size: 18px"></i>
            {{ this.$store.state.username }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu>
            <el-dropdown-item command="logout">
              退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <div class="tabMenu">
      <el-tabs value="matrix" style="margin-left: 20px" @tab-click="changeTab">
        <el-tab-pane label="需求跟踪矩阵" name="matrix">
          <demand-matrix-body ref="matrix"></demand-matrix-body>
        </el-tab-pane>

        <el-tab-pane label="我的评审" name="review" v-if="this.$store.state.privilege == 1">
          <demand-review-body ref="review"></demand-review-body>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import DemandMatrixBody from "./DemandMatrixBody";
import DemandReviewBody from "./DemandReviewBody"

export default {
  name: 'DemandManageHead',
  data() {
    return {
    }
  },
  methods: {
    userAct(command) {
      if (command === "logout") this.logout()
      if (command === "changePassword") alert("change!")
    },
    logout() {
      this.$store.dispatch("changePrivilegeAction", 2)
      //this.$router.replace("/")
    },
    changeTab(tab) {
      if (tab.name == 'matrix') {
        this.$refs.matrix.refresh()
      } else if (tab.name == 'review'){
        this.$refs.review.refresh()
      }
    }
  },
  components: {
    DemandMatrixBody,
    DemandReviewBody
  },
  mounted: function () {
    if (this.$store.state.privilege == 2) {
      this.$router.push('/')
    }
  },
  watch: {
    '$store.state.privilege': function (val) {
      if (val == 2) this.$router.push('/')
    }
  }
};
</script>

<style>
.head {
  position: absolute;
  width: 100%;
  height: 64px;
  line-height: 64px;
  font-size: 18px;
  color: black;
}

.el-menu--horizontal > {
  background: #38b7ff;
  color: white !important;
}

.tabMenu {
  position: absolute;
  width: 95%;
  top: 72px;
}
el-table::before {
  z-index: inherit;
}
</style>
